<template>
	<view class="scrollimg_containers">
		<!-- <scroll-view scroll-x="true" class="scrollimg_containers_content"> -->
		<view scroll-x="true" class="scrollimg_containers_content">
			<view v-for="(item,index) in imgListArr" :key="index" style="cursor: pointer;" class="scrollimg_containers_content_item"
				@tap="goPeopleDetail(item,day,indexs)">
				<!-- <image class="scrollimg_containers_content_item_image" :src="item.headImgurl" mode="scaleToFill"></image> -->
				<lazy-image class="scrollimg_containers_content_item_image" radius="2rpx" :realSrc="item.headImgurl"
					mode="scaleToFill"></lazy-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'scrollImg',
		components: {

		},
		props: {
			actorVoList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			day: {
				type: String,
				default: ''
			},
			indexs: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				imgListArr: []
			};
		},
		mounted() {
			this.imgListArr = this.actorVoList
			// #ifdef H5

			// #endif
		},
		methods: {
             goPeopleDetail(item,day,index){
             	uni.navigateTo({
             		url: '/pages/artists/detail?actorId='+item.id+'&day='+day+'&index='+index
             	});
             }
		}
	};
</script>

<style scoped lang="scss">
	.scrollimg_containers {
		&_content {
			white-space: nowrap;
			width: 100%;
			overflow-x:auto;

			&_item {
				display: inline-block;
				width: 220rpx;
				height: 220rpx;
				margin-right: 8rpx;

				&_image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
	}
	/deep/ .scrollimg_containers_content::-webkit-scrollbar {
		display:block;
		width:100% !important;
		height:16rpx !important;
		-webkit-appearance: none;
		background: #f5f5f5;
	}
	/deep/ .scrollimg_containers_content::-webkit-scrollbar-thumb {
	  border-radius: 2px;
	  background-color: #357041;
	  cursor: pointer;
	  z-index: 999;
	}
</style>